<template>
  <div>
    <h2>用户注册页面</h2>
    <table class="table table-bordered">
      <tr>
        <td>用户名:</td>
        <td>
          <input type="text" v-model="registerData.UL_Name" />
        </td>
      </tr>
      <tr>
        <td>密码:</td>
        <td>
          <input type="password" v-model="registerData.UL_Pwd" />
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <input type="button" value="注册" class="btn btn-primary" @click="registerInfo">
        </td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">

import { useRouter } from 'vue-router';

import {reactive,toRefs} from 'vue'
import axios from 'axios';

let router = useRouter();

let data = reactive({
  registerData:{
        UL_Name:'',
        UL_Pwd:''
    }
});

let {registerData} = toRefs(data);

//注册
const registerInfo = () => {
    if(registerData.value.UL_Name==""){
      return alert("用户名不能为空");
    }
    if(registerData.value.UL_Pwd==""){
      return alert("密码不能为空");
    }   
    //发送登录请求
    axios({
      url:'/api/User/PostUserLogin',
      method:'post',
      data:registerData.value
    }).then(res=>{
      console.log(res);
      if(res.data.data==-1){
        //该用户名已存在
        return alert('该用户名已存在');
      }else if(res.data.data==1){
        //注册成功
        alert('注册成功')
        //跳转到登录页面
        router.push('/login');
      }else{
        return alert('注册失败');
      }
    }).catch(err=>{
      //请求失败处理
      console.log(err);
    })
};

</script>

<style scoped>

</style>